<template>
  <div class="main-shopInfo">
    <!-- 表单内容 -->
    <w-form-validate @on-validate="onPublish">
      <div class="mainC">
        <div class="main-shopinfo">
          <div class="addGoods">
            <!-- 标题导航 -->
            <div class="titleNav" :class="isTabFixed ? 'fixed' : ''">
              <a v-for="(item, index) in navList" href="javascript:;" :key="index" :class="{active: index == curNavIndex}" @click="onSelectNav(index)">
                {{item.title}}
              </a>
            </div>
            <!-- 商品添加主体 -->
            <div class="main-goodsAdd">
              <!-- 产品参数 -->
              <div class="j_index product clearfix">
                <!-- 标题 -->
                <div class="title">
                  <span class="fr">产品参数</span>
                </div>
                <!-- 产品参数信息 -->
                <div class="titleList">
                  <div class="goodsTilte">类目：</div>
                  <div class="titleDetail" v-if="!goodsParams.gcName">
                    <div>请选择分类</div>
                  </div>
                  <div class="titleDetail" v-if="goodsParams.gcName">
                    <div>{{goodsParams.gcName}}</div>
                  </div>
                  <button type="button" class="btn btnGoods" @click="onEditClassify">编辑</button>
                </div>
                <div class="titleList">
                  <div class="goodsTilte"><span class="require">*</span>供应商类型：</div>
                  <div class="titleDetail">
                    <w-input :must="true" v-model="goodsParams.merchantType" disabled></w-input>
                    <!-- <w-select :options="merchantTypeLists" :must="true" v-model="goodsParams.merchantType"></w-select> -->
                  </div>
                </div>
                <div class="titleList">
                  <div class="goodsTilte"><span class="require">*</span>供应商名称：</div>
                  <div class="titleDetail">
                    <w-input :validate="false" v-model="goodsParams.company" disabled></w-input>
                  </div>
                </div>
                <div class="titleList">
                  <div class="goodsTilte"><span class="require">*</span>商家机构号：</div>
                  <div class="titleDetail">
                    <w-input :validate="false" v-model="goodsParams.institutionNum" disabled></w-input>
                  </div>
                </div>
                <div class="titleList">
                  <div class="goodsTilte"><span class="require">*</span>商品货号：</div>
                  <div class="titleDetail">
                    <w-input :validate="false" :disabled="true" style="width: 70px;" v-model="goodsParams.institutionNum"></w-input>
                    <w-input rule="isEmpty|isGoodsSeries" error="必填|数字或字母与数字的组合" v-model="goodsParams.goodsNumber" @on-blur="onBlurGoodsSeries"></w-input>
                  </div>
                </div>
                <div class="titleList">
                  <div class="goodsTilte"><span class="require">*</span>商品产地：</div>
                  <div class="titleDetail goodsProductArea">
                    <w-area-picker v-model="goodsParams.gcounty"></w-area-picker>
                  </div>
                </div>

                <!-- 产品信息 -->
                <div class="titleList" v-for="(goods, index) in goodsParams.productParam" :key="index">
                  <div class="goodsTilte" :class="{ver: goods.choice == 2}">
                    <span class="require" v-if="goods.required == 0">*</span>{{goods.name}}：
                  </div>
                  <!-- input框 -->
                  <div class="titleDetail" v-if="goods.choice == 0">
                    <w-input rule="isEmpty" error="必填" v-model="goods.value" v-if="goods.required == 0"></w-input>
                    <w-input :validate="false" v-model="goods.value" v-else></w-input>
                  </div>
                  <!-- select下拉 -->
                  <div class="titleDetail" v-if="goods.choice == 1">
                    <w-select :options="goods.options" v-model="goods.value"></w-select>
                  </div>
                  <!-- checkbox复选框 -->
                  <div class="titleDetail" v-if="goods.choice == 2">
                    <w-checkbox-group v-model="goods.aValue">
                      <!-- 平台自设的风格 -->
                      <div class="checkItem" v-for="(check, checkIndex) in goods.checks" :key="checkIndex">
                        <w-checkbox-item :result="check.result" :label="`${check.result}${checkIndex}`">{{check.result}}</w-checkbox-item>
                        <i class="u-sku-del" v-if="check.isDel" @click="goods.checks.splice(checkIndex, 1)"></i>
                      </div>
                      <!-- 自定义添加 -->
                      <div class="addNewOther">
                        <div class="addNewC" v-show="!addControl[goods.name]" @click.stop="addControl[goods.name] = true">
                          <img src="../../assets/addInfo/btn_add.png" class="addBtnP">
                          <span>其他</span>
                        </div>
                        <!-- 新增显示输入框 -->
                        <div class="addNewC" v-show="addControl[goods.name]">
                          <w-input :validate="false" holder="请输入内容" v-model="addControl[`${goods.name}Name`]"></w-input>
                          <button class="btn btnAdd" type="button" @click.stop="onCreateItem(goods.name, goods)">提交</button>
                        </div>
                      </div>
                    </w-checkbox-group>
                  </div>
                  <button v-if="goods.isDel" type="button" class="btn btnGoods" style="width: 48px; height: 30px; margin-left: 10px;" @click="goodsParams.productParam.splice(index, 1)">删除</button>
                </div>

                <!-- 新增产品参数 -->
                <div class="addNewP">
                  <!-- 新增显示输入框 -->
                  <div class="add" v-show="addControl.product">
                    <w-input :validate="false" holder="请输入内容" v-model="addControl.productName"></w-input>
                    <button class="btn btnAdd" type="button" @click="onCreateItem('productName')">提交</button>
                  </div>
                  <div class="add" v-show="!addControl.product" @click="addControl.product = true">
                    <img src="../../assets/addInfo/btn_add2.png" alt="" class="addBtn">新增产品参数
                  </div>
                </div>
              </div>

              <!-- 商品属性 -->
              <div class="j_index property clearfix">
                <!-- 标题 -->
                <div class="title">
                  <span class="fr">商品属性</span>
                </div>

                <!-- 服务器获取的属性类目 -->
                <div class="titleList" v-for="(goods, index) in goodsParams.goodsProperty" :key="index">
                  <div class="goodsTilte" :class="{ver: goods.choice == 2}">
                    <span class="require" v-if="goods.required == 0">*</span>{{goods.name}}：
                  </div>
                  <!-- input框 -->
                  <div class="titleDetail" v-if="goods.choice == 0">
                    <w-input :validate="false" v-model="goods.value"></w-input>
                  </div>
                  <!-- select下拉 -->
                  <div class="titleDetail" v-if="goods.choice == 1">
                    <w-select :options="goods.options" v-model="goods.value"></w-select>
                  </div>
                  <!-- checkbox复选框 -->
                  <div class="titleDetail" v-if="goods.choice == 2">
                    <w-checkbox-group v-model="goods.aValue" @on-change="validateMaxCheckboxNumber">
                      <!-- 平台自设的风格 -->
                      <div class="checkItem" v-for="(check, checkIndex) in goods.checks" :key="checkIndex">
                        <w-checkbox-item :result="check.result" :label="`${check.result}${checkIndex}`">{{check.result}}</w-checkbox-item>
                        <i class="u-sku-del" v-if="check.isDel" @click="goods.checks.splice(checkIndex, 1)"></i>
                      </div>
                      <!-- 自定义添加 -->
                      <div class="addNewOther">
                        <div class="addNewC" v-show="!addControl[goods.name]" @click="addControl[goods.name] = true">
                          <img src="../../assets/addInfo/btn_add.png" class="addBtnP">
                          <span>其他</span>
                        </div>
                        <!-- 新增显示输入框 -->
                        <div class="addNewC" v-show="addControl[goods.name]">
                          <w-input :validate="false" holder="请输入内容" v-model="addControl[`${goods.name}Name`]"></w-input>
                          <button class="btn btnAdd" type="button" @click="onCreateItem(goods.name, goods)">提交</button>
                        </div>
                      </div>
                    </w-checkbox-group>
                  </div>
                  <button v-if="goods.isDel" type="button" class="btn btnGoods" style="width: 48px; height: 30px; margin-left: 10px;" @click="goodsParams.goodsProperty.splice(index, 1)">删除</button>
                </div>

                <!-- 新增商品属性 -->
                <div class="addNewP">
                  <!-- 新增显示输入框 -->
                  <div class="add" v-show="addControl.property">
                    <w-input :validate="false" holder="请输入内容" v-model="addControl.propertyName"></w-input>
                    <button class="btn btnAdd" type="button" @click="onCreateItem('propertyName')">提交</button>
                  </div>
                  <div class="add" v-show="!addControl.property" @click="addControl.property = true">
                    <img src="../../assets/addInfo/btn_add2.png" alt="" class="addBtn">新增商品属性
                  </div>
                </div>
              </div>

              <!-- 商品销售信息 -->
              <div class="j_index sell clearfix borB">
                <!-- 标题 -->
                <div class="title">
                  <span class="fr">商品销售信息</span>
                </div>
                <!-- 商品销售信息 -->
                <div class="titleList">
                  <div class="goodsTilte">
                    <span class="require">*</span>供货方式：
                  </div>
                  <div class="titleDetail">
                    <div class="radio">
                      <w-radio label="1" name="supplyMode" v-model="goodsParams.supplyMode">现货</w-radio>
                    </div>
                    <div class="radio">
                      <w-radio label="0" name="supplyMode" v-model="goodsParams.supplyMode">订货</w-radio>
                    </div>
                    <div class="radio">
                      <w-radio label="3" name="supplyMode" v-model="goodsParams.supplyMode">现货且支持订货</w-radio>
                    </div>
                  </div>
                </div>
                <!-- 加工周期 -->
                <div class="titleList" v-if="goodsParams.supplyMode != 1">
                  <div class="goodsTilte"><span class="require">*</span>加工周期：</div>
                  <div class="titleDetail">
                    <w-input rule="isEmpty|onlyIntNo0" error="必填|数字格式" v-model="goodsParams.machCycle"></w-input>
                    <span class="textC">单位：天</span>
                  </div>
                </div>
                <!-- 最快出货时间 -->
                <div class="titleList">
                  <div class="goodsTilte">最快出货时间：</div>
                  <div class="titleDetail">
                    <w-select :options="shipTimeLists" :must="false" v-model="goodsParams.shipTime"></w-select>
                    <!-- <w-datepicker :split="true" v-model="goodsParams.shipTime"></w-datepicker> -->
                  </div>
                </div>
                <!-- 销售方式 -->
                <div class="titleList">
                  <div class="goodsTilte" style="vertical-align: top;">
                    <span class="require">*</span>销售方式：
                  </div>
                  <div class="titleDetail">
                    <div class="radio">
                      <w-radio label="1" name="saleMode" v-model="goodsParams.saleMode">普通售卖</w-radio>
                    </div>
                    <div class="radio">
                      <w-radio label="2" name="saleMode" v-model="goodsParams.saleMode">批量售卖</w-radio>
                    </div>
                    <div class="buyAccess" v-if="goodsParams.saleMode == 2">
                      <div class="titleTip">买家只能按销售单位的倍数购买</div>
                      <div class="buyD">
                        <div class="buyDel">
                          <div class="goodsTilte"><span class="require">*</span>销售单位：</div>
                          <div class="titleDetail">
                            <w-select :options="saleTypeLists" :must="true" v-model="goodsParams.salesUnit" @on-change="onChange1"></w-select>
                          </div>
                        </div>
                        <div class="buyDel">
                          <div class="goodsTilte"><span class="require">*</span>1{{goodsParams.meteringLabel1}}等于：</div>
                          <div class="titleDetail">
                            <w-input rule="isEmpty|onlyIntNo0" error="必填|只能填入数字" v-model="goodsParams.unitCount"></w-input>
                            <span>{{goodsParams.meteringLabel1}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 商品价格库存 -->
              <div class="j_index goodStock clearfix">
                <!-- 标题 -->
                <div class="title">
                  <span class="fr">商品价格库存</span>
                </div>
                <!-- 类目 -->
                <div class="titleList">
                  <div class="goodsTilte"><span class="require">*</span>出厂价：</div>
                  <div class="titleDetail">
                    <w-input rule="isEmpty|onlyMoney" error="请输入出厂价|可包含至多2位小数的数字" v-model="goodsParams.factoryPrice"></w-input>
                    <span class="textC">单位：元</span>
                  </div>
                </div>

                <!-- 计量单位 -->
                <div class="titleList">
                  <div class="goodsTilte">
                    <span class="require">*</span>计量单位：
                  </div>
                  <div class="titleDetail">
                    <w-select :options="sizeTypeLists" :must="true" v-model="goodsParams.metering" @on-all="onChange"></w-select>
                  </div>
                </div>

                <!-- 批发价 -->
                <div class="titleList">
                  <div class="goodsTilte" style="vertical-align: top;"><span class="require">*</span>批发价：</div>
                  <div class="titleDetail">
                    <!-- 价格区间 -->
                    <div class="range">
                      <div class="titlePrice">
                        <span style="margin: auto 140px auto 118px">购买区间</span>
                        <span>产品单价</span>
                      </div>
                      <!-- 批发价-价格区间 -->
                      <div class="priceRange" v-for="(tierd, tierdIndex) in goodsParams.tierdPrice" :key="tierdIndex">
                        <span class="tit">起订量</span>
                        <w-input v-model="tierd.count" :validate="true" rule="isEmpty|onlyIntNo0" error="必填|数字格式" @blur="onBlueTradeCount(tierd.count, tierdIndex)"></w-input>
                        {{goodsParams.meteringLabel}}及以上
                        <w-input v-model="tierd.price" :validate="true" rule="isEmpty|onlyMoney" error="必填|可包含至多2位小数的数字" @focus="onFocusTradePrice" @blur="onBlurTradePrice"></w-input>
                        元<span v-show="goodsParams.meteringLabel">/</span>{{goodsParams.meteringLabel}}
                        <span class="textM del" v-if="tierdIndex == goodsParams.tierdPrice.length - 1 && tierdIndex != 0" @click="goodsParams.tierdPrice.splice(tierdIndex, 1)">删除</span>
                      </div>
                      <!-- 新增价格区间 -->
                      <div class="priceRange" style="padding-left: 50px;" @click="goodsParams.tierdPrice.push({count: '', price: ''})" v-if="goodsParams.tierdPrice.length < 3">
                        <img src="../../assets/addInfo/btn_add2.png" alt="" class="addBtn">
                        <span>新增产品参数</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="titleList">
                  <!-- 颜色 -->
                  <app-color :list="goodsParams.coloursize.colorList" @select="getSelectedColor" v-if="goodsParams.coloursize.colorList.length"></app-color>
                  <!-- 尺码组件 -->
                  <app-size :list="goodsParams.coloursize.sizeList" @on-add="setNewSizeList" :institution-id="goodsParams.institutionNum" :product-id="goodsParams.goodsNumber" v-model="selectedColorObj.specpropertyList" @change="setSizeInventoryCode" v-if="goodsParams.coloursize.sizeList.length"></app-size>

                  <!-- sku表 -->
                  <app-sku :goods-type="goodsParams.supplyMode" :list="goodsParams.goodsInventoryDetail" @delete="deleteSizeList" @on-change="skuListChange" v-if="goodsParams.goodsInventoryDetail.length && goodsParams.goodsInventoryDetail[0].specpropertyList.length"></app-sku>
                </div>
                
                <!-- 可售数量 -->
                <div class="titleList borB" v-if="goodsParams.supplyMode != 2">
                  <div class="goodsTilte">
                    可售数量：
                  </div>
                  <div class="titleDetail">
                    <w-input :validate="false" :disabled="true" error="数字格式" v-model="goodsParams.salTotal"></w-input>
                  </div>
                </div>

              </div>
              
              <!-- 商品描述 -->
              <div  class="j_index goodsDetailList clearfix borB">
                <!-- 标题 -->
                <div class="title">
                  <span class="fr">商品描述</span>
                </div>
                <!-- 商品销售信息 -->
                <div class="titleList">
                  <div class="goodsTilte">
                    <span class="require">*</span>商品标题：
                  </div>
                  <div class="titleDetail goodsName">
                    <w-input rule="isEmpty|isName" error="必填|汉字、字母、数字，不含特殊字符" :maxlength="20" v-model="goodsParams.goodsName"></w-input>
                    <span class="textC">还能输入{{20 - goodsParams.goodsName.length}}个字</span>
                    <span class="textCm" @click="showWord = true">查看标题词语使用规范</span>
                  </div>
                </div>
                <!-- 商品货号： -->
                <div class="titleList">
                  <div class="goodsTilte">
                    <span class="require">*</span>商品货号：
                  </div>
                  <div class="titleDetail">{{goodsParams.institutionNum + goodsParams.goodsNumber}}</div>
                </div>
                <!-- 图片类型： -->
                <div class="titleList">
                  <div class="goodsTilte">
                    <span class="require">*</span>图片类型：
                  </div>
                  <div class="titleDetail">
                    <div class="radio">
                      <w-radio label="1" name="pictureType" v-model="goodsParams.pictureType">无模特实拍</w-radio>
                    </div>
                    <div class="radio">
                      <w-radio label="2" name="pictureType" v-model="goodsParams.pictureType">有模特实拍</w-radio>
                    </div>
                  </div>
                </div>

                <!-- 商品图片 -->
                <div class="titleList">
                  <div class="goodsTilte" style=" vertical-align: top;">
                    <span class="require">*</span>商品图片：
                  </div>
                  <div class="titleDetail goodsImg">
                    <div class="goodsDetail">
                      <!-- 图片上传 -->
                      <div class="imgDetail">

                        <!-- 图片上传，预览DIV -->
                        <div class="imgUpload clearfix">
                          <!-- 左边预览窗口 -->
                          <div class="preView fl">
                            <div class="preViewImg" :style="{'background-image': `url(${goodsParams.figure[curImgPrewIndex]})`}"></div>
                            <!-- 图片预览列表 -->
                            <ul class="preViewList">
                              <li class="prevImg" v-for="figureIndex in 5" :key="`figure${figureIndex}`" :class="{activeImg: curImgPrewIndex == (figureIndex - 1)}" @click="curImgPrewIndex = (figureIndex - 1)" :style="{'background-image': `url(${goodsParams.figure[figureIndex - 1]})`}"></li>
                            </ul>
                          </div>
                          <!-- 右边上传图片 -->
                          <ul class="m-goods-upload">
                            <li class="hover" v-for="(image, imgIndex) in goodsParams.figure" :key="imgIndex" :style="{'background-image': `url(${image})`}" @click="goodsParams.figure.splice(imgIndex, 1)"></li>
                            <li class="upload-btn" v-if="goodsParams.figure.length < 5">
                              <input type="file" accept="image/png,image/jpg,image/jpeg,image/gif" @change="onUploadImg">
                            </li>
                          </ul>
                        </div>
                        <!-- 注释 -->
                        <div class="textCTip" style="margin: 5px  0">
                          图片至少上传1张，图片类型只能为gif,png,jpg,jpeg，且大小不超过500K。
                        </div>
                        <div>
                          <span class="textT">请不要在商品图片上添加任何信息，如水印、价格信息等，一经发现降权处理。</span>
                          <span class="textM">查看图片规则</span>
                        </div>

                        <!-- 视频上传 -->
                        <div class="uploadRadio">
                          <div class="fl">
                            <div class="upload">
                              <div class="radioDiv">
                                <!-- 实拍视频 -->
                                <form class="form" enctype="multipart/form-data" method="post" action="">
                                  <!-- 上传按钮 -->
                                  <div class="radioBtn">
                                    <div class="radioTitle">实拍视频</div>
                                    <input type="file" name="imgFile">
                                  </div>
                                </form>
                              </div>
                              <div class="radioT textT">
                                视频总长<span class="textCTip">60s</span>内
                              </div>
                            </div>
                          </div>
                          <div class="radioTip">
                            <div class="textT">1、实拍视频可同时在手机端和PC端展现，无需分开发布。</div>
                            <div class="textT">2、时长：小于等于60秒，建议9-30秒。</div>
                            <div class="textT">3、尺寸：建议1:1，利于买家的视频观看体验。</div>
                            <div class="textT">4、内容：建议突出商品1-2个核心卖点，不建议电子相册式的图片翻页视频。</div>
                            <div class="textM">查看完整教程</div>
                          </div>
                        </div>
                      </div>
                      <!-- button选择 -->
                      <div class="bgC">
                        <div class="btnDe" style="width: 130px;">从图片空间选择</div>
                        <div class="btnDe" style="width: 130px;">从视频空间选择</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 商品描述 -->
                <div class="titleList">
                  <div class="goodsTilte" style=" vertical-align: top;">
                    <span class="require">*</span>商品描述：
                  </div>
                  <div class="titleDetail">
                    <div class="goodsDetail">
                      <!-- button选择 -->
                      <!-- <div>
                        <vue-editor v-model="goodsParams.goodsDetails" :editorToolbar="editorCustomToolbar" useCustomImageHandler @imageAdded="emitImgUpload"></vue-editor>
                      </div> -->
                      <quill-editor ref="quillEditor" v-model="goodsParams.goodsDetails"></quill-editor>
                      <!-- 文件上传 -->
                      <input type="file" id="quill-editor-file" style="display: none;" @change="emitImgUpload($event.target.files[0], $refs.quillEditor.quill)">
                    </div>
                  </div>
                </div>

                <!-- 在店铺中所属类目： -->
                <div class="titleList">
                  <div class="goodsTilte">
                    在店铺中所属类目：
                  </div>
                  <div class="titleDetail">
                    <w-select :options="classTypeLists" v-model="goodsParams.category"></w-select>
                  </div>
                </div>

              </div>

              <!-- 物流运费信息 -->
              <div class="j_index logistics clearfix borB">
                <!-- 标题 -->
                <div class="title">
                  <span class="fr">物流运费信息</span>
                </div>
                <!-- 发货方 -->
                <div class="titleList">
                  <div class="goodsTilte">
                    <span class="require">*</span>发货方：
                  </div>
                  <div class="titleDetail address">
                    <w-select :options="consignorList" :must="true" v-model="goodsParams.consignor" @on-select="onChangeConsignor"></w-select>
                  </div>
                </div>
                <!-- 所在地： -->
                <!-- <div class="titleList">
                  <div>
                    <div class="goodsTilte">
                      <span class="require">*</span>所在地：
                    </div>
                    <div class="titleDetail goodspropertyArea">
                      <w-area-picker v-model="goodsParams.county"></w-area-picker>
                    </div>
                  </div>
                </div> -->
                <!-- 发货地址： -->
                <!-- <div class="titleList">
                  <div class="goodsTilte">发货地址：</div>
                  <div class="titleDetail address">
                    <w-input rule="isArea" error="格式错误" v-model="goodsParams.address"></w-input>
                  </div>
                </div> -->
                <!-- 运费设置： -->
                <div class="titleList">
                  <div class="goodsTilte">
                    <span class="require">*</span>运费设置：
                  </div>
                  <div class="titleDetail address">
                    <div style="display: inline-block">
                      <w-select :options="transportList" :defaultSe="false" :must="true" v-model="goodsParams.transportId"></w-select>
                    </div>
                    <span class="c-main" style="margin-left: 20px;" v-if="!goodsParams.consignor">*请先选择发货方</span>
                    <span class="c-main" style="margin-left: 20px;" v-if="goodsParams.consignor && transportList.length == 0">*该发货方暂无运费模板</span>
                  </div>
                </div>
                <!-- 单位重量： -->
                <div class="titleList">
                  <div class="goodsTilte" style=" vertical-align: top;">单位重量：</div>
                  <div class="titleDetail addressP">
                    <div>
                      <div class="titleAddress">物流体积(m3)：</div>
                      <w-input rule="isIntPoint" error="格式错误" :must="true" v-model="goodsParams.goodsVolume"></w-input>
                    </div>
                    <div style="margin-top: 10px">
                      <div class="titleAddress">物流重量(kg)：</div>
                      <w-input rule="isIntPoint" error="格式错误" :must="true" v-model="goodsParams.goodsWeight"></w-input>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 特色服务 -->
              <div class="j_index service clearfix borB">
                <!-- 标题 -->
                <div class="title">
                  <span class="fr">特色服务</span>
                </div>
                <!-- 版型服务： -->
                <div class="titleList">
                  <div class="goodsTilte">
                    版型服务：
                  </div>
                  <div class="titleDetail">
                    <div class="radio">
                      <w-radio label="1" name="editService" v-model="goodsParams.editService">可改版</w-radio>
                    </div>
                    <div class="radio">
                      <w-radio label="2" name="editService" v-model="goodsParams.editService">不可改版</w-radio>
                    </div>
                    <span class="del-radio" @click="goodsParams.editService = ''" v-if="goodsParams.editService">清空</span>
                  </div>
                </div>
                <!-- 样品服务： -->
                <div class="titleList">
                  <div class="goodsTilte">
                    样品服务：
                  </div>
                  <div class="titleDetail">
                    <div class="radio">
                      <w-radio label="1" name="sampleService" v-model="goodsParams.sampleService">支持拿样</w-radio>
                    </div>
                    <div class="radio">
                      <w-radio label="2" name="sampleService" v-model="goodsParams.sampleService">不支持拿样</w-radio>
                    </div>
                    <span class="del-radio" @click="goodsParams.sampleService = ''" v-if="goodsParams.sampleService">清空</span>
                  </div>
                </div>
                <!-- 买家保障： -->
                <div class="titleList">
                  <div class="goodsTilte" style=" vertical-align: top;">
                    买家保障：
                  </div>
                  <div class="titleDetail">
                    <div class="guarantee">
                      <div class="rowG">
                        <div class="gDetail rowGL" style="width: 18%">包换服务</div>
                        <div class="gDetail" style="width: 80%">
                          <div class="radioG">
                            <w-radio label="1" name="replaceType" v-model="goodsParams.replaceType">7天包换</w-radio>
                          </div>
                          <div class="radioG">
                            <w-radio label="2" name="replaceType" v-model="goodsParams.replaceType">15天包换</w-radio>
                          </div>
                          <div class="radioG">
                            <w-radio label="3" name="replaceType" v-model="goodsParams.replaceType">30天包换</w-radio>
                          </div>
                          <span class="del-radio" @click="goodsParams.replaceType = ''" v-if="goodsParams.replaceType">清空</span>
                        </div>
                      </div>
                      <div class="rowG">
                        <div class="gDetail rowGL" style="width: 18%">退货服务</div>
                        <div class="gDetail" style="width: 80%">
                          <div class="radioG">
                            <w-radio label="1" name="returnGoods" v-model="goodsParams.returnGoods">7天无理由包退</w-radio>
                          </div>
                          <span class="del-radio" @click="goodsParams.returnGoods = ''" v-if="goodsParams.returnGoods">清空</span>
                        </div>
                      </div>
                      <div class="rowG">
                        <div class="gDetail rowGL" style="width: 18%">材质保障</div>
                        <div class="gDetail" style="width: 80%">
                          <div class="radioG">
                            <w-radio label="1" name="materal" v-model="goodsParams.materal">是（缴纳保障金开通）</w-radio>
                          </div>
                          <div class="radioG">
                            <w-radio label="2" name="materal" v-model="goodsParams.materal">否</w-radio>
                          </div>
                          <span class="del-radio" @click="goodsParams.materal = ''" v-if="goodsParams.materal">清空</span>
                        </div>
                      </div>
                      <div class="rowG">
                        <div class="gDetail rowGL" style="width: 18%">无货必赔</div>
                        <div class="gDetail" style="width: 80%">
                          <div class="radioG">
                            <w-radio label="1" name="matched" v-model="goodsParams.matched">是（缴纳保障金开通）</w-radio>
                          </div>
                          <div class="radioG">
                            <w-radio label="2" name="matched" v-model="goodsParams.matched">否</w-radio>
                          </div>
                          <span class="del-radio" @click="goodsParams.matched = ''" v-if="goodsParams.matched">清空</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 私密商品： -->
                <div class="titleList">
                  <div class="goodsTilte" style=" vertical-align: top;">私密商品：</div>
                  <div class="titleDetail">
                    <div class="radio" style="margin-right: 60px;">
                      <w-radio label="1" name="pGoods" v-model="goodsParams.pGoods">会员特供</w-radio>
                    </div>
                    <div class="radio" style="margin-right: 60px;">
                      <w-radio label="2" name="pGoods" v-model="goodsParams.pGoods">图片私密</w-radio>
                    </div>
                    <div class="radio" style="margin-right: 60px;">
                      <w-radio label="3" name="pGoods" v-model="goodsParams.pGoods">价格私密</w-radio>
                    </div>
                    <span class="del-radio" @click="goodsParams.pGoods = ''" v-if="goodsParams.pGoods">清空</span>
                    <!-- 注释 -->
                    <div class="tip">
                      <span class="textCTip">注释：</span><span class="textC">会员特供商品不会进入搜索，只有在用户个人中心里才可见，私密商品根据会员等级开放</span>
                    </div>
                  </div>
                </div>
                <!-- 增值商品： -->
                <div class="titleList">
                  <div class="goodsTilte">增值商品：</div>
                  <div class="titleDetail">
                    <w-checkbox-group v-model="goodsParams.aGoods" @on-change="onGoodsIncreace">
                      <div class="radio" style="margin-right: 60px;">
                        <w-checkbox-item name="a-goods" result="1" label="1">微商可供</w-checkbox-item>
                      </div>
                      <div class="radio" style="margin-right: 60px;">
                        <w-checkbox-item name="a-goods" result="2" label="2">跨境可供</w-checkbox-item>
                      </div>
                      <div class="radio" style="margin-right: 60px;">
                        <w-checkbox-item name="a-goods" result="3" label="3">特价专供</w-checkbox-item>
                      </div>
                      <div class="radio" style="margin-right: 60px;">
                        <w-checkbox-item name="a-goods" result="4" label="4">网红专供</w-checkbox-item>
                      </div>
                    </w-checkbox-group>
                  </div>
                </div>
              </div>

              <!-- 提交按钮 -->
              <div class="sumbitGroup">
                <div>
                  点击阅读<span class="textCTip" @click="showRule = true">《好下单网站总则》</span>
                </div>
                <div class="btnGroup">
                  <button class="btn btnMain" type="submit">同意协议条款，我要发布</button>
                  <button class="btn btnMain" @click.prevent="onPreview">预览</button>
                  <button class="btn btnMain" @click.prevent="onSketch">保存到草稿</button>
                </div>
              </div>

              <!-- 词语使用规范模态框 -->
              <w-panel-fixed-wrap :panel-title="showTitle" title="标题词语使用规范" v-model="showWord" @on-confirm="showWord = false">
                <p class="modalContent">
                  1、宝贝标题字数<br>
                    限定在30个汉字（60个字符以内）否则会影响发布；空格算一个字符。<br>
                  2、利用空格<br>
                    关键词之间使用空格，空格也可以用|，/，\代替。<br>
                  3、要在标题里尽量体现宝贝的规格，特性，和功能<br>
                    让买家一目了然看到宝贝的概况，方便买家进行选择！买家用搜索功能时出现符
                    合条件的宝贝是非常多的，可选择性太大也很容易让买家烦躁，不可能把每个宝
                    贝的页面打开来看，如果你在宝贝标题里把规格，功能等说清楚，这样买家就会
                    非常容易找到他想选择的东东！<br>
                </p>
              </w-panel-fixed-wrap>
              <!-- 好下单网站总则模态框 -->
              <w-panel-fixed-wrap title="好下单规则总则" width="860px" height="460px" v-model="showRule" @on-confirm="showRule = false">
                <rule></rule>
              </w-panel-fixed-wrap>
            </div>
          </div>
        </div>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { wScroll, session } from 'js/util'
import { FONT_GOODS_DETAIL_URL } from 'js/const'
import { apiGoodsMange, apiClassifyMange, apiUploadImage } from 'js/api'
import { VueEditor } from 'vue2-editor'
import appColor from './components/color'
import appSize from './components/size'
import appSku from './components/sku'
import rule from './components/rule'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  data () {
    return {
      // 如果是保存
      save: false,
      // 当前点击的颜色信息
      selectedColorObj: {},
      color: '',
      gcId: this.$route.query.goodsid,
      sid: this.$route.query.suid, // 店铺id
      // 标题导航列表
      navList: [
        {title: '产品参数', top: ''},
        {title: '商品属性', top: ''},
        {title: '商品销售信息', top: ''},
        {title: '商品价格库存', top: ''},
        {title: '商品描述', top: ''},
        {title: '物流运费信息', top: ''},
        {title: '特色服务', top: ''}
      ],
      idset: {}, // 存储草稿箱或正式ID
      curNavIndex: 0, // 标题导航选中的标记，默认第一个选中
      isTabFixed: false, // tab是否固定
      curImgPrewIndex: 0, // 当前选中的图片上传预览，默认选中第一个
      editorCustomToolbar: [
        ['image', 'code-block'],
        [{'header': [1, 2, 3, 4, 5, 6, false]}],
        [{'color': []}, {'background': []}]
      ], // 富文本工具条定制
      showWord: false, // 显示词语使用规范模态框
      showRule: false, // 展示网站规则
      // 新增商品的参数
      goodsParams: {
        accessToken: '',
        id: this.$route.query.sketchid || '', // 商品id
        type: '', // 1发布2预览3草稿
        addType: session.get('addType') || '',
        gcName: '',
        gcId: '',
        ladder: '',
        threeMenuCode: this.$route.query.three || '',
        goodsStoreId: '',
        merchantType: '',
        goodsSerial: '',
        goodsNumber: '',
        gcounty: '',
        productParam: [],
        goodsProperty: [],
        factoryPrice: '',
        tierdPrice: [
          {count: '', price: ''}
        ],
        coloursize: {
          colorList: [],
          sizeList: []
        },
        goodsInventoryDetail: [],
        figure: [],
        goodsMainPhotoPath: '',
        goodsDetails: '',
        salTotal: 0,
        metering: '', // value
        meteringLabel: '', // label
        meteringLabel1: '', // label
        supplyMode: '1', // 商品销售信息 -- 供货方式，默认为现货
        machCycle: '',
        shipTime: '',
        saleMode: '1', // 商品销售信息 -- 销售方式：默认为普通售卖
        salesUnit: '',
        unitCount: '',
        goodsName: '',
        pictureType: '1', // 商品描述 -- 图片类型: 默认为无模特实拍
        category: '',
        county: '',
        address: '',
        transportId: '',
        consignor: '', // 发货方：1--商家发货，2--平台发货
        goodsWeight: '',
        goodsVolume: '',
        feature: [], // 特色服务
        editService: '',
        sampleService: '',
        pGoods: '',
        aGoods: [],
        replaceType: '',
        returnGoods: '',
        materal: '',
        matched: '',
        view: 2
      },
      // merchantTypeLists: [], // 供应商类型
      sizeTypeLists: [], // 计量单位
      classTypeLists: [], // 店铺中所属类目
      saleTypeLists: [], // 销售单位
      transportList: [], // 运费设置
      consignorList: [
        {
          'value': 1,
          'label': '商家发货'
        },
        {
          'value': 2,
          'label': '平台发货'
        }
      ], // 发货方
      shipTimeLists: [], // 最快出货时间
      // 新增产品属性,和单选按钮
      addControl: {
        product: false,
        property: false,
        productName: '',
        propertyName: ''
      },
      showTitle: true,
      draftsIdPe: ''
    }
  },
  created() {
    this.fetchShopType() // 获取店铺类型
    // 如果url中有sketchid则查询草稿箱，goodsid查询正式数据
    this.idset.sketchid = this.$route.query.sketchid
    // this.idset.goodsid = this.$route.query.goodsid
    // 如果是从草稿箱进来（还有一种情况是选择类目也会掉这个接口）
    if (this.idset.sketchid) {
      this._fetchGoodsDetail('sketchid', this.idset.sketchid)
    } else {
      this.goodsParams.gcName = decodeURIComponent(this.$route.query.gcname)
      this.goodsParams.ladder = this.$route.query.ladder || ''
      this.goodsParams.gcId = this.$route.query.gcid || ''
      this._initGetGoodsInfo()
    }
  },
  mounted() {
    /**
     * 滚动
     */
    this.$nextTick(() => {
      this.$refs.quillEditor.quill.getModule('toolbar').addHandler('image', () => {
        document.querySelector('#quill-editor-file').click()
      })
      this._setFloorTop()
      this._scrollListen()
    })
  },
  methods: {
    ...mapActions(['fetchShopType']),
    /**
     * 校验商品货号是否重复
     */
    onBlurGoodsSeries() {
      const goodsSerial = this.goodsParams.institutionNum + this.goodsParams.goodsNumber
      if (!this.goodsParams.goodsNumber) return
      apiGoodsMange.apiGoodsSerial(goodsSerial).then(data => {
        if (data.code != 200) {
          this.goodsParams.goodsNumber = ''
        }
      })
    },
    /**
     * 增值服务
     */
    onGoodsIncreace(aGoods) {
      this.goodsParams.aGoods = aGoods || []
    },
    /**
     * SKU表
     * {{goodsParams.supplyMode}}
     */
    skuListChange() {
      this.goodsParams.salTotal = 0
      this.goodsParams.goodsInventoryDetail.forEach(v => {
        v.specpropertyList.forEach(data => {
          this.goodsParams.salTotal += Number(data.specpropertyInventCount)
        })
      })
    },
    // 校验最大选择的复选框数量
    validateMaxCheckboxNumber(aValue) {
      // 如果过长，则将最后一个删除
      if (aValue && aValue.length > 4) {
        this.$toast('最多只能选择4个')
        aValue.splice(4, 1)
      }
    },
    // 设置尺码
    setNewSizeList(params) {
      this.goodsParams.coloursize.sizeList.push(params)
    },
    // 编辑分类
    onEditClassify() {
      if (this.idset.sketchid) {
        this.$router.push(`/goodsMange/classify?three=${this.$route.query.three}&sketchid=${this.idset.sketchid}&suid=${this.$route.query.suid}`)
      } else {
        this.$router.push(`/goodsMange/classify?three=${this.$route.query.three}&suid=${this.$route.query.suid}`)
      }
    },
    // 判断批发价必须大于出厂价
    onBlurTradePrice(params) {
      if (parseFloat(params.val) <= parseFloat(this.goodsParams.factoryPrice)) {
        this.$toast('输入价格不能小于等于出厂价', () => {
          params.event.target.value = ''
          params.event.target.focus()
        })
      }
      // 遍历已经输入的价格
      this.goodsParams.tierdPrice.forEach((v, index) => {
        if (Number(v.price) == Number(params.val) && index > 0) {
          if (Number(this.goodsParams.tierdPrice[index - 1].price) <= Number(params.val)) {
            this.$toast('请输入低于上一个价格区间的数值', () => {
              params.event.target.value = ''
              params.event.target.focus()
            })
          }
        }
      })
    },
    /**
     * 校验批发价必须大于上一个价格
     *
     * @param { Number } value 当前输入的值
     * @param { Number } index 当前的索引值
     */
    onBlueTradeCount(value, index) {
      // 如果当前是第一个，则不校验
      if (index == 0) {
        return
      }
      // 如果输入值高于上一个值
      if (Number(this.goodsParams.tierdPrice[index - 1].count) >= Number(value)) {
        this.goodsParams.tierdPrice[index].count = ''
        this.$toast('请输入高于上一个区间的数值')
      }
    },
    // 判断批发价获取焦点判断
    onFocusTradePrice(event) {
      if (!this.goodsParams.factoryPrice) {
        this.$toast('请先输入出厂价', () => {
          event.target.blur()
        })
      }
    },
    // 获取选中的颜色
    getSelectedColor(obj) {
      // 将未选择尺码的删除
      this.goodsParams.goodsInventoryDetail = this.goodsParams.goodsInventoryDetail.filter(v => {
        return v.specpropertyList.length > 0
      })

      // 保存当前点击的颜色
      this.selectedColorObj = Object.assign({}, obj, { specpropertyCrowdSum: '', specpropertyImg: '', specpropertyImgFull: '', specpropertyList: [] })

      // 判断当前点击的在不在数组中
      let isIn = this.goodsParams.goodsInventoryDetail.filter(v => {
        // 如果当前值之前存在，则取出之前的值
        if (v.specpropertyName == obj.specpropertyName) {
          this.selectedColorObj = v
        }
        return v.specpropertyName == obj.specpropertyName
      })

      // 如果没有在数据中没有值
      if (isIn.length == 0) {
        this.goodsParams.goodsInventoryDetail.push(this.selectedColorObj)
      }
    },
    // 设置库存编码
    setSizeInventoryCode(prefix) {
      // 库存编码从一开始
      let index = 1
      // 将累加的编码后缀放到数组中
      this.goodsParams.goodsInventoryDetail.forEach((v, index1) => {
        v.specpropertyId = `${index1 + 1}`
        v.specpropertyList.forEach((v1, dataIndex) => {
          v1.specpropertyId = `${index1 + 1}${dataIndex}`
          v1.specpropertySerial = prefix + index++
        })
      })
    },
    // 删除指定条目的尺码数据
    deleteSizeList(indexObj) {
      this.goodsParams.goodsInventoryDetail.forEach((v, index) => {
        if (index == indexObj.firstIndex) {
          v.specpropertyList.splice(indexObj.secondIndex, 1)
        }
        // 若sku中尺码信息不存在，则删除该sku数据
        if (v.specpropertyList.length == 0) {
          this.goodsParams.goodsInventoryDetail.splice(index, 1)
        }
      })
    },
    // 新增的产品参数/商品属性
    onCreateItem(name, origin) {
      // 添加属性子类
      if (origin) {
        const val = this.addControl[`${name}Name`]
        if (!val) {
          this.$toast('请输入标题')
          return
        }
        if (origin.checks.find(v => v.result == val)) {
          this.$toast('输入值已存在')
          return
        }
        origin.checks.push({
          result: val,
          isDel: true
        })
        this.addControl[name] = false
        this.addControl[`${name}Name`] = ''
      } else { // 添加商品属性和参数
        if (!this.addControl[name]) {
          this.$toast('请输入标题')
          return
        }
        const para = name == 'productName' ? 'productParam' : 'goodsProperty'
        const opti = name == 'productName' ? 'product' : 'property'
        this.goodsParams[para].push({
          name: this.addControl[name],
          value: '',
          required: '1',
          choice: '0',
          storeId: this.sid,
          isDel: true
        })
        this.addControl[opti] = false
        this.addControl[name] = ''
      }
    },
    // 初始化新增商品要获取的数据
    _initGetGoodsInfo() {
      this._fetchStoreInfo()
      this._fetchProductParam()
      this._fetchColorAndSize()
      this._fetchTransportList()
    },
    // 获取查询商品详情，（草稿和正式）
    _fetchGoodsDetail(origin, id) {
      let sketchInfo = {
        'accessToken': this.token,
        'threeMenuCode': this.$route.query.three || '',
        'id': id // 商品id
      }
      if (origin == 'sketchid') {
        apiGoodsMange.apiGoodsEdit(sketchInfo).then(data => {
          const { goodsDraft = {} } = data.data
          this.goodsParams = Object.assign({}, this.goodsParams, goodsDraft)
          this.goodsParams.gcName = this.$route.query.gcname || this.goodsParams.gcName
          this.goodsParams.ladder = this.$route.query.ladder || this.goodsParams.ladder
          this.goodsParams.coloursize = JSON.parse(this.goodsParams.coloursize || '{}')
          // 如果拼单规则尺码存在
          if (this.goodsParams.tierdPrice && this.goodsParams.tierdPrice.length) {
            this.goodsParams.tierdPrice.forEach(v => {
              v.count = v.count.split('-')[0]
            })
          }
          // 增值商品
          if (this.goodsParams.aGoods && this.goodsParams.aGoods.length) {
            this.goodsParams.aGoods = this.goodsParams.aGoods ? this.goodsParams.aGoods.split(',') : []
          }
          if (this.goodsParams.goodsInventoryDetail && this.goodsParams.goodsInventoryDetail.length) {
            this.selectedColorObj = this.goodsParams.goodsInventoryDetail[0] || {}
          }
          this._fetchStoreInfo()
          this._fetchTransportList()
        })
      }
    },
    // 文本域图片上传
    emitImgUpload(file, Editor) {
      const formData = new FormData()
      if (!file) {
        return
      }
      if (file.size > 1048576) {
        this.$toast('请选择小于1M的图片')
        return
      }
      if (!/\.(png|jpeg|jpg|gif)/i.test(file.name)) {
        this.$toast('请选择JPG,JPEG,PNG,GIF格式的图片')
        return
      }
      formData.append('file', file)
      formData.append('id', this.sid)
      formData.append('uploadType', 'goodsdetail')
      formData.append('type', 'h5')
      apiUploadImage(formData).then(data => {
        Editor.insertEmbed(Editor.getSelection().index, 'image', data.data.photoUrl)
      })
    },
    // 上传图片
    onUploadImg(ev) {
      const oFile = ev.target.files[0]
      const formData = new FormData()
      if (!oFile) {
        return
      }
      if (oFile.size > 1048576) {
        this.$toast('请选择小于1M的图片')
        return
      }
      if (!/\.(png|jpeg|jpg|gif)/i.test(oFile.name)) {
        this.$toast('请选择JPG,JPEG,PNG,GIF格式的图片')
        return
      }
      formData.append('file', oFile)
      formData.append('id', this.sid) // 店铺id
      formData.append('uploadType', 'main') // 图片类型
      formData.append('type', 'h5')
      apiUploadImage(formData).then(data => {
        this.goodsParams.figure.push(data.data.photoUrl || '')
      })
    },
    // 发布
    onPublish() {
      this.save = true
      this._transformGoodsParams()
      if (this.idset.sketchid) {
        this.goodsParams.id = this.idset.sketchid
      }
      let goodsParams = JSON.parse(JSON.stringify(this.goodsParams))
      if (!this.goodsParams.merchantType) {
        this.$toast('请选择供应商类型')
        return
      }
      if (!this.goodsParams.transportId) {
        this.$toast('请配置运费模板')
        return
      }
      // 判断sku表中是否存在颜色信息，若无，则return
      if (goodsParams.goodsInventoryDetail.length == 0 || !goodsParams.goodsInventoryDetail) {
        this.$toast('请选择产品颜色和尺码')
        return
      }
      // 判断每一个颜色下是否有尺码信息，若无，则return
      let specCount = true
      let goodsInventoryDetail = goodsParams.goodsInventoryDetail.filter(sku => {
        if (sku.specpropertyList.length == 0 || !sku.specpropertyList) {
          this.$toast('请选择产品尺码')
          return goodsParams.goodsInventoryDetail == []
        } else {
          // 若供货方式为现货，则sku的数量必填
          if (this.goodsParams.supplyMode == 1) {
            sku.specpropertyList.forEach(spec => {
              if (spec.specpropertyInventCount == 0 || !spec.specpropertyInventCount) {
                this.$toast('供货方式为‘现货’时，SKU表的数量是必填的')
                specCount = false
              }
            })
            return goodsParams.goodsInventoryDetail
          }
          return goodsParams.goodsInventoryDetail
        }
      })
      if (!this.goodsParams.figure.length) {
        this.$toast('请上传商品主图')
        return
      }
      if (!goodsParams.goodsDetails || goodsParams.goodsDetails == '') {
        this.$toast('请填写商品详细描述信息')
        return
      }
      if (goodsInventoryDetail.length > 0 && goodsInventoryDetail && specCount) {
        goodsParams.aGoods = goodsParams.aGoods.join(',')
        goodsParams.type = '1' // 发布
        apiGoodsMange.apiGoodsSave(goodsParams).then(data => {
          this.$toast(`${this.idset.sketchid ? '修改' : '新增'}商品信息成功`, () => {
            this.$router.replace(`/goodsMange/list?three=${this.$route.query.three}`)
          })
        })
      }
    },
    // 预览
    onPreview() {
      this.save = true
      this.goodsParams.view = 1
      this._transformGoodsParams()
      // if (this.idset.sketchid) {
      //   this.goodsParams.id = this.idset.sketchid
      // }
      this.goodsParams.id = this.idset.sketchid || this.draftsIdPe || ''
      let goodsParams = JSON.parse(JSON.stringify(this.goodsParams))
      goodsParams.aGoods = goodsParams.aGoods.join(',')
      goodsParams.type = '2'
      apiGoodsMange.apiGoodsSave(goodsParams).then(data => {
        this.draftsIdPe = data.data.draftsId || this.goodsParams.id
        window.open(`${FONT_GOODS_DETAIL_URL}${this.draftsIdPe}`)
      })
    },
    // 提交的草稿箱
    onSketch() {
      this.save = true
      this.goodsParams.view = 2
      this._transformGoodsParams()
      // if (this.idset.sketchid) {
      //   this.goodsParams.id = this.idset.sketchid
      // }
      this.goodsParams.id = this.idset.sketchid || ''
      let goodsParams = JSON.parse(JSON.stringify(this.goodsParams))
      goodsParams.aGoods = goodsParams.aGoods.join(',')
      goodsParams.type = '3'
      apiGoodsMange.apiGoodsSave(goodsParams).then(data => {
        // const id = data.draftsId || this.goodsParams.id
        this.$toast(`${this.idset.sketchid ? '更新' : '保存'}草稿箱成功`, () => {
          this.$router.replace(`/goodsMange/list?three=${this.$route.query.three}`)
        })
      })
    },
    // 提交时的数据格式的处理
    _transformGoodsParams() {
      this.goodsParams.id = ''
      this.goodsParams.accessToken = this.token
      this.goodsParams.goodsStoreId = this.sid
      this.goodsParams.goodsMainPhotoPath = this.goodsParams.figure[0]
      this.goodsParams.goodsSerial = this.goodsParams.institutionNum + this.goodsParams.goodsNumber
      this.goodsParams.machCycle = this.goodsParams.supplyMode == 1 ? '' : this.goodsParams.machCycle
      this.goodsParams.editService = this.goodsParams.editService ? Number(this.goodsParams.editService) : ''
      this.goodsParams.sampleService = this.goodsParams.sampleService ? Number(this.goodsParams.sampleService) : ''
      this.goodsParams.replaceType = this.goodsParams.replaceType ? Number(this.goodsParams.replaceType) : ''
      this.goodsParams.returnGoods = this.goodsParams.returnGoods ? Number(this.goodsParams.returnGoods) : ''
      this.goodsParams.materal = this.goodsParams.materal ? Number(this.goodsParams.materal) : ''
      this.goodsParams.matched = this.goodsParams.matched ? Number(this.goodsParams.matched) : ''
      this.goodsParams.pGoods = this.goodsParams.pGoods ? Number(this.goodsParams.pGoods) : ''
      this.goodsParams.goodsProperty.forEach(item => {
        if (typeof item.aValue == 'object') {
          item.value = item.aValue.join(',')
        }
      })
      this.goodsParams.productParam.forEach(item => {
        if (typeof item.aValue == 'object') {
          item.value = item.aValue.join(',')
        }
      })
    },
    // 标题导航显示
    onSelectNav(index) {
      this.curNavIndex = index
      if (index == 0) {
        document.body.scrollTop = document.documentElement.scrollTop = (this.navList[index].top - 40)
        return
      }
      document.body.scrollTop = document.documentElement.scrollTop = (this.navList[index].top - 88)
    },
    // 页面更新时，设置scrollTop值
    _setFloorTop() {
      window.scroll(0, 0)
      setTimeout(() => {
        let aFloor = document.querySelectorAll('.j_index')
        aFloor = Array.from(aFloor)
        aFloor && aFloor.forEach((item, index) => {
          this.navList[index].top = item.offsetTop
        })
      }, 1000)
    },
    // 滚动监听
    _scrollListen() {
      wScroll(top => {
        if (top >= 160) {
          this.isTabFixed = true
        } else {
          this.isTabFixed = false
        }
        this.navList.forEach((item, index) => {
          if (top >= item.top - 100) {
            this.curNavIndex = index
          }
        })
      }).mount()
    },
    // 获取商家的机构号等基本信息
    _fetchStoreInfo() {
      const params = {
        'accessToken': this.token,
        'threeMenuCode': this.$route.query.three || '',
        'id': this.sid
      }
      apiClassifyMange.queryShopInfo(params).then(data => {
        this.goodsParams.company = data.data.company
        this.goodsParams.merchantType = data.data.merchantType // 供应商类型
        this.goodsParams.institutionNum = data.data.institutionNum
        // this.merchantTypeLists = this.shopTypeList // 供应商类型
        // 最快出货时间
        data.data.sizeTypeLists.forEach(item => {
          this.sizeTypeLists.push({
            value: item.id,
            label: item.son
          })
        })
        // 在店铺中所属类目
        data.data.classTypeLists.forEach(item => {
          this.classTypeLists.push({
            value: item.id,
            label: item.son
          })
        })
        // 销售单位
        data.data.saleTypeLists.forEach(item => {
          this.saleTypeLists.push({
            value: item.id,
            label: item.son
          })
        })
        // 计量单位
        data.data.mtime.forEach(item => {
          this.shipTimeLists.push({
            value: item.id,
            label: item.son
          })
        })
        // this.goodsParams.merchantType = this.goodsParams.merchantType || data.merchantTypeLists.join('-')
        this.goodsParams.merchantType = this.goodsParams.merchantType || ''
        this.goodsParams.category = this.goodsParams.category || ''
        this.goodsParams.salesUnit = this.goodsParams.salesUnit || ''
        this.goodsParams.metering = this.goodsParams.metering || ''
        this.sizeTypeLists.forEach(item => {
          if (item.value == this.goodsParams.metering) {
            this.goodsParams.meteringLabel = item.label
          }
        })
        this.saleTypeLists.forEach(item => {
          if (item.value == this.goodsParams.salesUnit) {
            this.goodsParams.meteringLabel1 = item.label
          }
        })
      })
    },
    // 查询颜色尺码
    _fetchColorAndSize() {
      apiClassifyMange.getPtysProperty().then(v => {
        this.goodsParams.coloursize.colorList = v.data.colourList
        this.goodsParams.coloursize.sizeList = v.data.sizeList
      })
    },
    /**
     * 更改发货方时，区分发货方的运费模板，并清空已选择的运费模板
     */
    onChangeConsignor(consignor) {
      this.goodsParams.consignor = consignor
      this.goodsParams.transportId = ''
      this._fetchTransportList()
    },
    // 查询运费模版
    _fetchTransportList() {
      this.transportList = []
      apiClassifyMange.queryGoodsTranSport(this.sid).then(data => {
        const list = data.data || []
        if (list.length != 0 && list) {
          list.forEach(item => {
            // 选择平台发货，则生成平台运费模板
            if (item.defaultV3 == 1 && this.goodsParams.consignor == 2) {
              this.transportList.push({
                value: item.transportId,
                label: item.transportName
              })
            } else if ((item.defaultV3 != 1 || !item.defaultV3) && this.goodsParams.consignor == 1) {
              // 选择商家发货，则生成商家运费模板
              this.transportList.push({
                value: item.transportId,
                label: item.transportName
              })
            }
          })
          this.goodsParams.transportId = this.goodsParams.transportId || (this.goodsParams.consignor ? this.transportList[0].value : '')
        }
      })
    },
    // 获取平台预设，商家自设的商品基本信息
    _fetchProductParam() {
      let goodsParams = {
        'accessToken': this.token,
        'gcId': this.$route.query.gcid || '',
        'threeMenuCode': this.$route.query.three
      }
      apiClassifyMange.apiGoodsParams(goodsParams).then(data => {
        this.goodsParams.productParam = data.data.paramlist || []
        this.goodsParams.goodsProperty = data.data.attrilist || []
        this._setGoodsParamsByChoice(this.goodsParams.productParam)
        this._setGoodsParamsByChoice(this.goodsParams.goodsProperty)
      })
    },
    // 设置属性或参数列表
    _setGoodsParamsByChoice(params) {
      params.forEach((item, index) => {
        if (item.choice == '1') {
          const aValue = item.value.split(',')
          item.options = []
          aValue.forEach(val => {
            item.options.push({
              label: val,
              value: val
            })
          })
          item.value = '' // 取消默认第一个
          // item.value = aValue[0]
        } else if (item.choice == '2') {
          this.$set(this.addControl, item.name, false)
          this.$set(this.addControl, `${item.name}Name`, '')
          this.$set(item, 'aValue', item.aValue || [])
          const newChecks = item.value.split(',').map(item => {
            return {
              result: item
            }
          })
          this.$set(item, 'checks', newChecks)
          item.value = ''
        }
      })
    },
    /**
     * 选择select时，获取value,label
     */
    onChange(options) {
      this.goodsParams.meteringLabel = options.label
    },
    onChange1(options) {
      this.goodsParams.meteringLabel1 = options.label
    }
  },
  computed: {
    ...mapGetters(['token', 'areaList', 'shopTypeList'])
  },
  components: {
    VueEditor,
    appColor,
    appSize,
    appSku,
    rule,
    quillEditor
  },
  destroyed() {
    wScroll().unmount()
  }
}
</script>

<style lang="scss">
.main-shopInfo {
  // 顶部nav
  .m-app-header {
    position: relative;
  }
  .w-input {
    width: 262px;
    display: inline-block;
  }
  .select-wrap .form-control {
    width: 262px;
  }
  .goodsProductArea {
    .select-wrap .form-control {
      width: auto;
    }
  }
  .add {
    .form-control {
      width: 260px;
      height: 20px;
      min-height: 20px
    }
    .btn {
      width: 48px;
      height: 20px;
      border-radius: 0
    }
  }
  .range {
    .w-input {
      width: 132px;
    }
  }
  .buyAccess {
    .w-input {
      width: 118px;
    }
    .select-wrap .form-control {
      width: 185px;
    }
  }
  .goodsName {
    .w-input {
      width: 380px;
    }
  }
  .address {
    .w-input {
      width: 390px;
    }
  }
  .addressP {
    .w-input {
      width: 168px;
      .error-tip {
        margin-top: 0;
        left: 184px;
        width: 100px;
        line-height: 30px;
      }
    }
  }
  .form-control {
    background-color: #ffffff;
  }
  .titleList {
    .btn {
      width: 56px;
      height: 20px;
      border-radius: 0px
    }
  }
  .btnGroup {
    .btn {
      width: 190px;
      height: 20px;
    }
  }
  #richEditorCon {
    width: 100%!important;
    height: 550px!important;
  }
  .ql-editor {
    height: 500px;
    overflow: auto;
  }
  // CheckBox样式
  .m-checkbox {
    .check-btn {
      width: 15px!important;
      height: 15px!important;
    }
    input {
      &:checked+.check-btn {
        width: 15px;
        height: 15px;
        &::before {
          top: 7px!important;
          left: 1px!important;
          width: 7px!important;
          height: 2px!important;
        }
        &::after {
          top: 5px!important;
          left: 4px!important;
          width: 10px!important;
          height: 2px!important;
        }
      }
    }
  }
}
</style>

<style lang="scss">
@import '../../scss/_var.scss';
em {
  font-style: italic;
}
strong {
  font-weight: 600;
  em {
    font-weight: 600;
  }
}
.del-radio {
  cursor: pointer;
  color: $color-main;
}
.main-shopInfo {
  .logo {
    width: 1230px;
    height: 50px;
    margin: 0 0 46px 20px;
    cursor: pointer;
    background: url('../../assets/addInfo/logo.png') no-repeat;
  }
  .titleNav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    align-self: center;
    border-bottom: 1px solid #ebebeb;
    background-color: #fafafb;
    a {
      text-align: center;
      width: 100%;
      height: 100%;
      line-height: 50px;
      border-top: 2px solid transparent;
      &.active {
        border-top: 2px solid #f352aa;
      }
    }
    &.fixed {
      width: 1230px;
      position: fixed;
      top: 0;
      z-index: 20;
    }
  }
  // vertical-align
  .ver {
    vertical-align: top;
  }
  .btnGoods {
    margin-left: 30px;
    color: $color-blue;
    background-color: transparent !important;
    border: 1px solid $color-blue;
  }
  // 必填标记
  .require {
    color: #f352aa;
    margin-right: 8px;
    display: inline-block;
  }
  .close {
    font-size: 20px;
    cursor: pointer;
  }
  // select样式
  select {
    width: 262px;
    height: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
  }
  // 图片删除按钮
  .closeImg {
    width: 12px;
    height: 12px;
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
    margin-left: -5px;
  }
  // 模态框背景
  .bgModal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #c1c1c1;
    opacity: 0.2;
  }
  // 模态框主体内容
  .modalContaint {
    z-index: 111;
    position: fixed;
    width: 536px;
    background-color: #fff;
    bottom: 30%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 5px;
  }
  .modalTitle {
    height: 50px;
    line-height: 50px;
    background-color: #f7f7f7;
    text-align: center;
    font-size: 14px;
    padding: 0 20px;
    color: $color-dark
  }
  .modalContent {
    line-height: 20px;
  }
  // 新增按钮
  .btnAdd {
    color: #ffffff;
    background-color: #73b1e0
  } 
  // 新增checkBox的属性样式
  .addNewOther {
    display: inline-block;
    .w-input {
      width: 100px;
      height: 20px;
    }
    // 新增风格
    .addNewC {
      cursor: pointer;
      display: inline-block;
      height: 20px;
      vertical-align: bottom;
      margin-bottom: 20px;
      line-height: 20px;
      .addBtnP {
        width: 12px;
        height: 12px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  // 新增产品参数
  .addNewP {
    width: 1230px;
    height: 30px;
    line-height: 30px;
    background-color: #c8dde8;
    .add {
      margin-left: 242px;
    }
  }
  // 图片上传
  .imgUpload {
    .preView {
      width: 130px;
      height: 160px;
      margin-right: 20px;
      .preViewImg {
        width: 130px;
        height: 130px;
        border: 1px solid $color-main;
        background-size: cover;
        background-position: center center;
      }
      .preViewList {
        margin-top: 10px;
        .prevImg {
          width: 20px;
          height: 20px;
          border: 1px solid #cecece;
          float: left;
          margin-right: 7px;
          cursor: pointer;
          background-size: cover;
          background-position: center center;
          &:last-child {
            margin-right: 0
          }
        }
      }
      .activeImg {
        border: 1px solid $color-main!important;
      }
    }
    .upload {
      display: inline-block;
    }
  }
  // 图片上传
  .mainItem {
    margin-right: 30px;
    display: inline-block;
    vertical-align: top;
    button {
      margin-top: 20px;
      color: #F20685;
      line-height: 18px;
      font-size: 14px;
      border: 1px solid;
      background-color: #fff;
    }
    .delete-img-icon {
      background-image: url('../../assets/delete-img-icon.png');
      background-position: center;
      background-repeat: no-repeat;
      width: 30px;
      height: 30px;
      margin: 20px auto;
      background-size: 100%;
    }
    .single-button {
      display: block;
      position: relative;
      width: 100px;
      height: 30px;
      border-radius: 3px;
      border: 1px solid;
      color: #F20685;
      text-align: center;
      margin-top: 20px;
      input {
        width: 0;
        height: 0;
        opacity: 0;
      }
      .img-preview {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
      }
    }
    .ma-h3 {
      width: 90px;
      text-align: center;
      margin-top: 5px;
    }
    .up-single-upload-wrap {
      position: relative;
      display: block;
      height: 30px;
      border-radius: 4px;
      width: 90px;
      top: 10px;
      left: 5px;
      line-height: 28px;
      color: #F20685;
      text-align: center;
      border: 1px solid #F20685;
      text-align: center;
      background-color: #fff;
      cursor: pointer;
      .img-preview {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
      }
      input {
        width: 0;
        height: 0;
        opacity: 0;
      }
    }
  }
  // 图片上传
  .imgW {
    height: 98px;
    width: 98px;
  }
  // 图片上传
  .colorList {
    margin-bottom: 25px;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .mainItem {
      vertical-align: middle;
      margin-left: 39px;
    }
  }
  // 颜色图片上传
  .SKU {
    .imgUpload {
      width: 100%;
      overflow: hidden;
      position: relative;
      .imgUploadTitle {
        width: 100%;
        text-align: center;
      }
      input {
        width: 100%;
        height: 20px;
        overflow: hidden;
        opacity: 0;
        cursor: pointer;
      }
    }
  }
  // 商品描述图片上传按钮
  .fileBtn {
    width: 98px;
    // height: 20px;
    overflow: hidden;
    margin-top: 10px;
    text-align: center;
    background-color: #fafafb;
    border: 1px solid #cecece;
    position: relative;
    .fileTitle {
      width: 100%;
      line-height: 20px;
      position: absolute;
      cursor: pointer;
    }
    input {
      width: 100%;
      height: 20px;
      overflow: hidden;
      opacity: 0;
      cursor: pointer;
    }
  }
  .m-goods-upload {
    float: left;
    font-size: 0;
    li {
      position: relative;
      display: inline-block;
      width: 90px;
      height: 90px;
      border: 1px solid #ddd;
      margin-right: 10px;
      text-align: center;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #fff;
      cursor: pointer;
      overflow: hidden;
      transiton: .2s;
      &.hover:hover {
        &.hover::after {
          content: "删除图片";
          position: absolute;
          left: 0;
          top: 0;
          width: 90px;
          height: 90px;
          line-height: 90px;
          text-align: center;
          font-size: 15px;
          color: #fff;
          background-color: rgba(0,0,0,.4);
        }
      }
      &.upload-btn {
        background-size: inherit;
        background-image: url('../../assets/addInfo/icon-upload.png');
      }
      input {
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }
    }
  }
  // 上传视频
  .uploadRadio {
    padding: 15px 0;
    .upload {
      width: 84px;
      height: 84px;
      border: 1px solid #cecece;
    }
    .radioDiv {
      width: 100%;
      height: 60px;
      text-align: center;
      line-height: 60px;
      position: relative;
      cursor: pointer;
    }
    .radioTip {
      display: inline-block;
      margin-left: 20px;
    }
    .radioT {
      height: 20px;
      border-top: 1px solid #b8b8b8;
      line-height: 20px;
    }
    .single-upload-wrap {
      width: 100%;
      height: 60px;
      background-color: transparent;
      border: none;
    }
    // 实拍视频上传按钮
    .radioBtn {
      width: 100%;
      position: absolute;
      font-size: 14px;
      input {
        width: 100%;
        height: 60px;
        overflow: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
      }
    }
  }
  .mainC {
    width: 100%;
    background-color: $color-white;
    font-size: 12px;
    .main-shopinfo {
      width: 1230px;
      margin: auto;
      .addGoods {
        border: 1px solid #ebebeb;
        .main-goodsAdd {
          padding: 20px 0;
          .title {
            padding: 30px 0 40px;
            width: 200px;
            font-size: 14px;
            font-weight: bold;
          }
          .titleList {
            padding-bottom: 25px;
          }
          // 标题
          .goodsTilte {
            width: 216px;
            text-align: right;
            display: inline-block;
          }
          // 标题详解
          .titleDetail {
            display: inline-block;
            max-width: 900px;
          }
          .textC {
            color: #cecece;
            margin-left: 15px;
          }
          .textT {
            color: #b8b8b8;
            line-height: 16px;
          }
          .textM {
            color: $color-blue;
            cursor: pointer;
          }
          .textCm {
            color: $color-main;
            cursor: pointer;
            margin-left: 15px;
          }
          .textCTip {
            color: $color-main;
            cursor: pointer;
          }
          .marT {
            margin-top: 20px;
          }
          // 底部边框
          .borB {
            border-bottom: 1px solid #cecece;
          } 
          // check
          .checkItem {
            position: relative;
            display: inline-block;
            padding-right: 15px;
            margin-bottom: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 10px;
          }
          // radio
          .radio {
            display: inline-block;
            margin-right: 90px;
          }
          // 编辑/删除 
          .addBtn {
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: sub;
            margin-right: 8px;
            cursor: pointer;
          }
          // 价格区间 
          .range {
            width: 548px;
            border: 1px solid $color-blue;
            border-bottom: none;
            .titlePrice {
              background-color: #c8dde8;
              height: 24px;
              line-height: 24px;
            }
            .priceRange {
              padding: 8px 0;
              border-bottom: 1px solid $color-blue;
              .tit {
                width: 80px;
                text-align: right;
                display: inline-block;
                white-space: pre;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .del {
                margin-left: 36px;
              }
            }
          }
          .SKU {
            table {
              width: 544px;
              border: 1px solid #cecece;
              td, th {
                padding: 5px 0;
                text-align: center
              }
            }
          }
          // 购买方式
          .buyAccess {
            width:356px;
            margin-top: 10px;
            border: 1px solid #cecece;
            border-bottom: none;
            .titleTip {
              text-align: center;
              padding: 10px 0;
              border-bottom: 1px solid #cecece;
            }
            .buyD {
              border-bottom: 1px solid #cecece;
              padding-bottom: 10px;
              .goodsTilte {
                width: 100px;
              }
              .buyDel {
                padding: 10px 0 0;
              }
            }
          }
          // 商品图片
          .goodsImgLists {
            width: 756px;
            border: 1px solid $color-blue;
          }
          .imgDetail {
            padding: 15px;
          }
          // 商品详情图片描述
          .goodsDetail {
            width: 756px;
            border: 1px solid $color-blue;
            .bgC {
              border-top: 1px solid #37c0ed;
              background-color: #c8dde8;
            }
            .btnDe {
              width: 104px;
              height: 18px;
              line-height: 18px;
              display: inline-block;
              text-align: center;
              cursor: pointer;
              border-right: 1px solid $color-blue;
            }
          }
          .addressP {
            margin-top: -7px;
            .titleAddress {
              width: 104px;
              display: inline-block;
              text-align: right
            }
          }
          // 特色服务
          .guarantee {
            width: 460px;
            border: 1px solid #cecece;
            border-bottom: none;
            .rowG {
              border-bottom: 1px solid #cecece;
              height: 30px;
              line-height: 30px;
              .rowGL {
                text-align: center;
                border-right: 1px solid #cecece;
              }
              .gDetail {
                display: inline-block;
              }
              .radioG {
                display: inline-block;
                margin-right: 15px;
                &:last-child {
                  margin-right: 0
                }
              }
            }
          }
          .tip {
            margin: 10px 0 0;
          }
          // 提交
          .sumbitGroup {
            text-align: center;
            padding: 30px 0 10px;
            .btnGroup {
              margin-top: 30px;
              .btnMain {
                background-color: $color-main;
                color: $color-white;
                border-radius: 0;
                margin: 0 40px;
              }
            }
          } 
        }
      }
    }
  }
  .u-sku-del {
    position: absolute;
    z-index: 10;
    width: 13px;
    height: 13px;
    background: url(../../assets/delect.png) no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    cursor: pointer;
  }
}
</style>